<template>
    <div>
        <el-card>
            <el-button type="success" @click="dialogFormVisible = true">添加商品</el-button>
            <el-input v-model="queryForm.account" clearable placeholder="请输入商品名称/商品ID">
                <template #append>
                    <el-button icon="Search" @click="queryByAccount"></el-button>
                </template>
            </el-input>
            <el-table :data="tableData" border>
                <el-table-column prop="product_id" label="商品ID"/>
                <el-table-column prop="product_name" label="商品名称"/>
                <el-table-column label="图片">
                    <template #default="scope">
                        <img :src="`http://127.0.0.1:8081/product1/${scope.row.picture}`" alt="" height="30">
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="商品价格"/>
                <el-table-column prop="description" label="描述信息"/>
                <el-table-column prop="deleted" label="删除状态"/>
                <el-table-column prop="published" label="上架状态"/>
                <el-table-column prop="recommended" label="推荐状态"/>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button type="success" size="small" @click="queryById(scope.row.product_id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="removeById(scope.row.product_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination :current-page="queryForm.pageNum" :page-size="queryForm.pageSize"
                           :page-sizes="[10, 20, 30, 40, 50, 100]" layout="->,total, sizes, prev, pager, next, jumper"
                           :total="total"
                           @size-change="handleSizeChange" @current-change="handleNumberChange"
            />
        </el-card>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加商品">
        <el-form :model="createForm" label-width="60">
            <el-form-item label="商品名称">
                <el-input v-model="createForm.product_name"/>
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                    v-model:file-list="fileList"
                    :auto-upload="false"
                    :limit="1"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="createForm.price"/>
            </el-form-item>
            <el-form-item label="描述信息">
                <el-input v-model="createForm.description"/>
            </el-form-item>
            <el-form-item label="删除状态">
                <el-input v-model="createForm.deleted" />
            </el-form-item>
            <el-form-item label="上架状态">
                <el-input v-model="createForm.published" />
            </el-form-item>
            <el-form-item label="推荐状态">
                <el-input v-model="createForm.recommended" />
            </el-form-item>

        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="create">
              添加
            </el-button>
          </span>
        </template>
    </el-dialog>
    <el-dialog v-model="editDialogFormVisible" title="编辑商品">
        <el-form :model="editForm" label-width="60">
            <el-form-item label="商品名称">
                <el-input v-model="editForm.product_name" />
            </el-form-item>
            <el-form-item label="图片">
                <el-upload
                    v-model:file-list="fileList"
                    :auto-upload="false"
                    :limit="1"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="editForm.price"/>
            </el-form-item>
            <el-form-item label="描述信息">
                <el-input v-model="editForm.description"/>
            </el-form-item>
            <el-form-item label="删除状态">
                <el-input v-model="editForm.deleted" />
            </el-form-item>
            <el-form-item label="上架状态">
                <el-input v-model="editForm.published" />
            </el-form-item>
            <el-form-item label="推荐状态">
                <el-input v-model="editForm.recommended" />
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="modify">
              保存
            </el-button>
          </span>
        </template>
    </el-dialog>
</template>

<script setup>
import productApi from '../../api/goods.js'
import {onMounted, ref, reactive, toRaw} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'

const dialogFormVisible = ref(false)
const createForm = reactive({
    product_name: 'product_name',
    picture: 'picture',
    price: '0',
    description: '描述信息',
    deleted: '0',
    published: '1',
    recommended: '1',
})
const fileList = ref([])

const type = {type: 'application/json'}

const create = async () => {
    createForm.files = fileList
    createForm.file = createForm.files[0].raw
    createForm.product = new Blob([JSON.stringify(toRaw(createForm))], type)

    dialogFormVisible.value = false

    const res = await productApi.create(createForm)
    if (res.data) {
        ElMessage.success('添加成功');
        queryAll()
    } else {
        ElMessage.error('添加失败');
    }
}

// 编辑会员
const editDialogFormVisible = ref(false)
let editForm = reactive({
    product_name: '',
    picture: '',
    price: '',
    description: '',
    deleted: '',
    published: '',
    recommended: '',
})

const editFileList = ref([])
const queryById = async (product_id) => {
    const res = await productApi.queryById({product_id: product_id})
    editForm.product_id = res.data.product_id
    editForm.product_name = res.data.product_name
    editForm.price = res.data.price
    editForm.picture = res.data.picture
    editForm.description = res.data.description
    editForm.deleted = res.data.deleted
    editForm.published = res.data.published
    editForm.recommended = res.data.recommended
    editDialogFormVisible.value = true
}

const modify = async () => {
    if (Array.isArray(editForm.favorites)) {
        editForm.favorites = JSON.stringify(editForm.favorites)
    }
    editForm.files = editFileList
    if (toRaw(editForm.files).length !== 0) {
        editForm.file = editForm.files[0].raw;
    } else {
        editForm.file = null
    }

    editForm.product = new Blob([JSON.stringify(toRaw(editForm))], type);

    editDialogFormVisible.value = false

    const res = await productApi.modify(editForm)
    if (res.data) {
        ElMessage.success('编辑成功');
        queryAll()
    } else {
        ElMessage.error('编辑失败');
    }
}

// 查询

onMounted(() => {
    queryAll()
})

let tableData = ref([])
let total = ref(0)

const queryForm = reactive({
    account: '',
    pageSize: 10,
    pageNum: 1,
})

const queryAll = async () => {
    const res = await productApi.queryAll({pageNum: queryForm.pageNum, pageSize: queryForm.pageSize})
    tableData.value = res.data.list
    total.value = res.data.total
}

const handleSizeChange = (size) => {
    queryForm.pageSize = size
    queryAll()
}
const handleNumberChange = (number) => {
    queryForm.pageNum = number
    queryAll()
}

const queryByAccount = async () => {
    const res = await productApi.queryByAccount({account: queryForm.account})
    tableData.value = res.data
}

const removeById = (product_id) => {
    console.log(product_id)
    ElMessageBox.confirm(
        '确定删除这个会员记录吗？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const res = await productApi.removeById({product_id: product_id})
        if (res.data) {
            ElMessage.success('删除成功')
            queryAll()
        } else {
            ElMessage.error('删除失败')
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}
</script>

<style scoped>
.el-input {
    width: 600px;
    margin-bottom: 20px;
    float: right;
}
</style>